<template>
    <div class="qradio">
        <div class="title">
            <span style="color:red;">*</span>
            <span>{{serialNum}}</span>
            {{data.question}}
        </div>
        <div class="tips" v-if="data.tips && data.tips.length > 0">{{data.tips}}</div>

        <el-radio-group v-model="model" @change="selectChange" class="r-group">
            <div class="r-label" v-for="(item ,index) in data.answerList" :key="index" @click="labelClick(index,item)">
                <el-radio :label="item">{{item}} <br></el-radio>
            </div>
            <br>

            <el-input @focus="inputFocus" @blur="inputBlur" :disabled="inputDisabled" class="qinput" size="small" ref="qinput" v-model="qinput"
                placeholder="请输入内容 15个字以内"  type="text" maxlength="15" show-word-limit>
            </el-input>
        </el-radio-group>
    </div>
</template>

<script>
import MODEL from '@/mixins/model';

export default {
    mixins: [MODEL],
    name: '',
    props: {
        serialNum: {
            type: Number,
            default: null,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            radio: null,
            qinput: '',
            inputDisabled: false,
        };
    },
    mounted() {},
    methods: {
        selectChange: function (item) {},
        
        //点击盒子，赋值
        labelClick(index, item) {
            this.model = item;

            // if (index + 1 == this.data.answerList.length) {
            //     if (this.model.indexOf('其他') == -1) {
            //         this.$refs['qinput'].focus();
            //     }
            // } else {
            //     this.$refs['qinput'].blur();
            // }

            if (this.model.indexOf('其他') == -1) {
                //向外传递
                this.$emit('otherItem', '');
            }
        },

        //获取焦点，手动赋值。
        inputFocus() {
            this.model = this.data.answerList[this.data.answerList.length - 1];
            // setTimeout(() => {
            //     if (this.model.length < 3) {
            //         console.log(this.model.indexOf('其他'));
            //         if( this.model.indexOf('其他') == -1){
            //             this.model.push('其他');
            //             this.$refs['qinput'].focus();
            //         }
            //     }
            // }, 300);
        },

        // 失去焦点，向外传值
        inputBlur(val) {
            this.$emit('otherItem', this.qinput);
        },
    },
};
</script>

<style lang="scss" scoped>
.qradio {
    font-size: 14px;
    .title {
        font-size: 18px;
        margin: 10px 0;
    }
    .tips {
        color: #979696;
    }

    ::v-deep .el-radio-group {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        font-size: 0;
        width: 100%;
        margin: 10px 0;
    }

    .r-label {
        padding: 8px 0;
        width: 100%;
        cursor: pointer;
        &:hover {
            background-color: #e9eefb;
        }
    }

    .r-group {
        position: relative;

        .qinput {
            position: absolute;
            bottom: 0px;
            left: 80px;
        }

        ::v-deep .el-input--small {
            font-size: 13px;
            width: 270px;
        }

        ::v-deep .el-input--small .el-input__inner {
            height: 32px;
            line-height: 32px;
            border-top: none;
            border-left: none;
            border-right: none;
            border-radius: 0px;
            width: 270px;
        }
    }
}
</style>
